<template>
  <el-dialog :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isDialog"
    :width="width"
    :fullscreen="fullscreen"
    :before-close="handleClose"
    class="myDialog"
     :class="[isHeader?'isHeader':'',fullscreen?'fullscreen':'']"
    append-to-body
    :show-close="showClose"
  >
    <div v-if="isHeader">
      <slot name="header"></slot>
    </div>
    <div style="width:100%;height:100%;overflow: hidden;">
      <slot name="content"></slot>
    </div>

    <span slot="footer" class="dialog-footer" v-if="isFooter|| ($slots.footer && Array.isArray($slots.footer) && $slots.footer.length)">
      <!-- <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      <slot name="footer"></slot>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    isDialog: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '600px'
    },
    title: {
      type: String,
      default: '默认标题'
    },
    isFooter:{
      type: Boolean,
      default: false
    },
    isHeader:{
      type: Boolean,
      default: false
    },
    fullscreen:{
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
  },
}
</script>

<style lang="scss" scoped>
.myDialog {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3%;
  .dialog-footer{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/.el-dialog.is-fullscreen{
    height: 100vh!important;
  }
  /deep/.el-dialog{
    // border-radius: 8px;
    // border: 1px solid #46828E;
    /* width: 600px; */
    min-height: 400px;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: 100%;
  }

  /deep/.el-dialog__header{
    // padding: 17px 40px;
    padding: 16px 20px 16px 15px;
    color: #97ddfb;
    // border-radius: 8px 8px 0 0;
    // background-image: url('../../../assets/images/headDialog.png');
    // background-repeat: no-repeat;
    // background-position:center;
    // // background-size: 100% 100%;
    // background-size: cover;
    // font-weight: bold;
    font-size: 18px;
    // background: #193f54;
    border-bottom: 1px solid #FFFFFF;
  }
  /deep/.el-dialog__title{
    color: #1c1c1c;
    font-family: "Alibaba PuHuiTi 3.0";
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;

    &::before{
      content: '';
      display: block;
      // width: 10px;
      // height: 10px;
      // border: 2px solid #FE6C01;
      // box-sizing: border-box;
      // border-radius: 50%;
      margin-right: 8px;
      background-image: url('../../../assets/images/gzq/icon-xm.png');
      background-repeat: no-repeat;
      background-size: 10px;
      width: 10px;
      height: 10px;
      // border-top: 9px solid transparent;
      // border-bottom: 9px solid transparent;
      // border-left: 8px solid #1E6FFF;
    }
  }
  /deep/.el-dialog__headerbtn{
    position: absolute;
    top: 16px;
    // transform: translateY(50%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position:center;
    background-size: 100% 100%;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close{
    display: none;
  }
  /deep/.el-dialog__body {
    padding: 48px 80px;
    overflow: auto;
    max-height: 78vh;
    flex: 1;
    // background: #08141e;
  }
  /deep/.el-dialog__footer{
    padding: 11px 16px;

    // border-top: 1px solid #ddd;
    background: #F5F6FA;
    display: flex;
    // justify-content: flex-end;
    justify-content: flex-end;
  }
}
.isHeader{
  /deep/.el-dialog__header{
    display: none!important;
  }
}
.fullscreen{
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0!important;
  /deep/.el-dialog.is-fullscreen {
   display: flex;
   flex-direction: column;
  }
  /deep/.el-dialog__body{
    padding: 0px!important;
    flex: 1;
     max-height: 100%!important;
    //max-height: max-content!important;
  }
  /deep/.el-dialog__footer{
    font-weight: bold;
    padding: 0px 24px 0px;
    // border-top: 1px solid #ddd;
    // background: #f3f6f7;
    display: flex;
    justify-content: flex-end;

    height: 48px;
    background: #f7f7f7;
  }
}
</style>
